<template>
    <div class="app">
        <Header/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <coreL/>
                <div class="datares">
                  <div class="ra">我的积分</div>
                  <div class="asdasda">　　　我的收入</div>
                  <div class="dafdefiii">
                    <div class="feieii">
                      <div class="top_os">
                        <div class="con_a">
                          <div class="top_con_1">
                            <img :src="nuserdas.icon" alt="">
                            <div><span>{{nuserdas.nickName}}</span></div>
                          </div>
                          <div class="top_con_3">
                            <div class="engko_a">
                              <div >
                                <div class="dafwfejio"> 当前积分: <span>{{nuserdas.integral}}</span>分</div>
                                <div class="aegegneige">（距离下一级还需要{{stillNeed}}积分）</div>
                              </div>
                              <div class="flex_lr">
                                <div class="dafwfejio">今日新增：  <span> {{nuserdas.increaseIntegral}}</span>  分</div>

                              </div>
                            </div>
                          </div>
                          <div class="top_con_2">
                            <div class="eng flex_lr">
                              <div><img src="@/assets/img/dji.png" alt=""> 等级：<span>{{nuserdas.levelName}}会员</span></div>
                              <div></div>
                            </div>
                            <div class="wwweeeeeee">
                              <el-progress :text-inside="true" :stroke-width="20" :percentage="percent" status="exception"></el-progress>
                                <div class="flex_lr">
                                  <div>{{nuserdas.integralBelow}}</div>
                                  <div>{{nuserdas.integralAbove}}</div>
                                </div>
                            </div>
                            <div class="efieoi" @click="egegefe">获取更多积分>></div>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="asdasda dadasdadaasda">　　　积分明细    </div>
                  <el-form ref="form" :model="form" label-width="180px" style="margin-top:20px">
                    <el-form-item label="积分时间：">
                    <el-date-picker
                      v-model="form.value1"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="积分来源：" style="display: inline-block;">
                    <el-select v-model="form.region1" placeholder="请选择积分来源">
                    <el-option
                      v-for="(list,index) in inuser"
                      :key="index"
                      :label="list.pointsTypeName"
                      :value="list.id">
                    </el-option>
                  </el-select>
                  </el-form-item>
                  <el-form-item label="积分数额：" style="display: inline-block;">
                    <el-select v-model="form.region2" placeholder="请选择积分数额">
                      <el-option label="0-50" value="0"></el-option>
                      <el-option label="51-100" value="1"></el-option>
                      <el-option label="101-200" value="2"></el-option>
                      <el-option label="200以上" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                  <div style="  display: flex;justify-content: center;align-items: center; margin-top: 10px; margin-bottom: 20px;">
                    <el-button type="danger" @click="solieer">搜索</el-button>
                  </div>
                  </el-form>

                  <div class="dzlist">
                    <el-table
                      :data="tableData"
                      border
                      style="width: 100%">
                      <el-table-column
                        prop="consigneeName"
                        label="积分时间"
                        width="300">
                      </el-table-column>
                      <el-table-column
                        prop="phoneNumber"
                        label="积分来源"
                        width="300">
                      </el-table-column>
                      <el-table-column
                        prop="province"
                        label="数额"
                        width='150'
                        >
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="ltiaoz">
                    <span @click="$router.push('/co52ds?id=1')">我的权益</span>
                    <span @click="$router.push('/co52ds?id=2')">我的成长路径</span>
                    <span @click="$router.push('/co52ds?id=3')">会员权益及要求</span>
                    <span @click="$router.push('/co52ds?id=4')">如何快速上升会员等级</span>
                  </div>
                </div>
              </div>
              <coreF/>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import coreL from '@/components/coreL'
import coreF from '@/components/coreF'
import axios from 'axios'
export default {
    components: {
    Header,
    Footer,
    coreL,
    coreF
    },
    data() {
      return {
       inuser:[],
       nuserdas:'',
       stillNeed:'',
       percent:0,
       tableData:[],
       solieerlsst:'',
       page:'1',
       form:{
        value1:'',
        region1:'',
        region2:''
       }
      }

    },
    created() {
      this.getFindAll()
    },
    mounted() {
      let nameid = localStorage.name
      this.usernameid = nameid
      this.userjifen()
    },
    methods: {
      async  getFindAll() {
       

      },
      userjifen() {
        let what = this
        axios({
          method: 'get',
          url:'http://47.105.66.232:8066/base/umsPointsDetails/findUserAndPointsDetails',
          params: {
            userId: what.usernameid
          } })
        .then(res=> {
          this.nuserdas = res.data.body
          let danqian =  res.data.body.integral//当前积分
          let wdjifen = res.data.body.integralAbove//等级总积分
          this.stillNeed = wdjifen - danqian
          this.percent = Math.round(danqian / wdjifen * 10000) / 100
        })
      },
      solieer () {
        let what = this
        axios({
          method: 'get',
          url:'http://47.105.66.232:8066/base/umsPointsDetails/findAll',
          params: {
            userId: what.usernameid,
            page: what.page,
            size:'10',
            amountTpye: what.form.region2,
            pointsTypeId: what.form.region1,
            startTime:'',
            endTime:''
          } })
        .then(res=> {
          this.solieerlsst = res.data.body
          console.log(res.data)
        })
      },
      egegefe() {
        this.$router.push({path:'/co55'})
      }
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.app  /deep/ .el-table th>.cell {
  text-align: center;
}
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datares {
  width: 930px;
  border-radius: 6px;
  background-color: #fff
}

.datares .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}
.asdasda {
  font-family: SourceHanSansCN-Regular;
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #434343;
  border-bottom: 1px solid #dcdcdc;
  margin-top: 20px;
    line-height: 46px;
    color: #434343
}
.dafdefiii {
  width: 866px;
	height: 159px;
  margin: 20px auto;
	border-radius: 10px;
  background: linear-gradient(45deg, #f06048 25%, #f19149 0, #f19149 50%, #f06048 0, #f06048 75%, #f19149 0);
  background-size: 40px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.feieii {
  width: 846px;
  height: 139px;
  background-color: #fff
}

.top_os .con_a {
  width: 836px;
	height: 132px;
  margin: 0px auto;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
}
.top_con_1 {
  width: 160px;
  height: 132px;
  text-align: center;
  line-height: 24px;
}
.top_con_1 img{
  width: 76px;
  height: 76px;
  border-radius: 50%;
}
.top_con_1 span {
  font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #000;
}
.top_con_1 .flex_lr div {
  width: 70px;
	height: 23px;
	border-radius: 4px;
	border: solid 1px #a0a0a0;
  font-family: SourceHanSansCN-Regular;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #a0a0a0;
}
.top_con_2 {
  width: 380px;
  height: 100px;
  margin-top: 15px
}
.top_con_2 .wwweeeeeee{
  margin-top: 4px;
}
.top_con_2 .wwweeeeeee div {
  color: #c5c5c5;
}
.top_con_2 .eng div {
  line-height: 35px;
  font-size: 16px;
	color: #000;
}
.top_con_3 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: -11px
}
.top_con_3 span {
  color: #e60012;
  font-size: 22px
}
.top_con_2 img{
   transform:translateY(4px)
}
.top_con_3 img{
   transform:translateY(4px)
}
.engko_a div{
margin-top: 5px
}
.top_con_3 .buenn{
  	width: 93px;
	height: 28px;
	background-color: #f06048;
	border-radius: 6px;
  line-height: 28px;
  text-align: center;
  font-size: 16px;
  color: #fff
}
.top_con_3 .buenn a {
  color: #fff
}
.top_con_3 .buenn a:hover {
  color: #fff
}
.efieoi {
	font-family: SourceHanSansCN-Regular;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #468ddd;
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.aegegneige {
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #a0a0a0;
}
.dafwfejio {
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
}
.dafwfejio span {
	font-family: Arial-BoldMT;
	font-size: 28px;
	font-weight: normal;
	letter-spacing: 0px;
	color: #f06048;
}
.dadasdadaasda {
  margin-top: 50px;
}
.dzlist {
  margin: 0 auto;
  width: 850px;
}
.ltiaoz{
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin: 10px 0px;
}
.ltiaoz span:hover{
  color: blue;
  cursor:pointer
}
</style>
